<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>给内容主题 Theming content-JQUERY MOBILE 中文API站</title>
<meta name="keywords" content="JQUERY MOBILE 1.0正式版中文手册,Jquery Mobile 1.0,Jquery mobile,移动框架开发手册,darklord,JQUERY MOBILE 1.0正式版,JQUERY API,jqmapi,jqm,jquery," />
<meta name="description" content="Jquery mobile中文API站，Jquery mobile 1.0正式版本中文手册，提供最新版Jquery mobile移动web与应用开发帮助。" />
<link rel="stylesheet" type="text/css" href="../../style/Jqueryapi.css" tppabs="http://www.jqmapi.com/style/Jqueryapi.css" />
<script type="text/javascript" src="../../style/lib/Jquery126.js" tppabs="http://www.jqmapi.com/style/lib/Jquery126.js"></script>
 </script>
<script type="text/javascript" src="../../style/Jqueryapi.js" tppabs="http://www.jqmapi.com/style/Jqueryapi.js"></script>
<link rel="shortcut icon" href="../../style/img/favicon.ico" />
</head>
<body>
<div class="nav">
<iframe width="250px" scrolling="no" frameborder="0" allowtransparency="true" src="../../nav.html" tppabs="http://www.jqmapi.com/nav.html" height="1300px"></iframe>
</div>
<div class="main">
<script src="style/jqmapi.js" tppabs="http://www.jqmapi.com/componts/formats/style/jqmapi.js" type="text/javascript"></script>
<hr style="color:#595959;" />

<div class="content">
				<h1>给内容主题 Theming content</h1>
				<div class="desc">
  <div>页面的主题内容区域（标有 data-role="content"属性的容器），应该通过给data-role="page"属性的容器增加 data-theme属性来确保不管页面多高背景色都能够在整个页面都应用到
（如果你只为data-role="content"容器添加了data-theme属性，则背景色会在内容结束部分停止，可能会造成固定尾部栏和内容之间产生留白 </div>
  <hr /></div>
  				<div class="code">&lt;div data-role=&quot;page&quot; <strong>data-theme=&quot;a&quot;</strong>&gt; </div>
                <hr />
				<h1>给折叠区块主题 Theming collapsible blocks</h1>    
				<div class="desc">
				  <div>给可折叠区块的容器添加data-theme属性，就可以给折叠块的标题设置主题。图标和折叠的内容目前还不能通过data-theme属性设置，但是可以通过自定义的css设置</div>
				  <div class="code">&lt;div data-role=&quot;collapsible&quot; data-collapsed=&quot;true&quot; <strong>data-theme=&quot;a&quot;&gt;</strong></div>
  </div>  
  
  <h1>主题的示例 Themed examples</h1>
	<p class="indent">主题a</p>
  	<img src="../../images/Themed examples/Themed examples_a.png" tppabs="http://www.jqmapi.com/images/Themed%20examples/Themed%20examples_a.png">   
	<p class="indent">主题b</p>
  	<img src="../../images/Themed examples/Themed examples_b.png" tppabs="http://www.jqmapi.com/images/Themed%20examples/Themed%20examples_b.png">   
	<p class="indent">主题c</p>
  	<img src="../../images/Themed examples/Themed examples_c.png" tppabs="http://www.jqmapi.com/images/Themed%20examples/Themed%20examples_c.png">   
	<p class="indent">主题d</p>
  	<img src="../../images/Themed examples/Themed examples_d.png" tppabs="http://www.jqmapi.com/images/Themed%20examples/Themed%20examples_d.png">       
	<p class="indent">主题e</p>
  	<img src="../../images/Themed examples/Themed examples_e.png" tppabs="http://www.jqmapi.com/images/Themed%20examples/Themed%20examples_e.png">         
</div>

			</div>
</div>

</body>
</html>



